<template>
	<view v-if="getRequestOK">
		<!-- 顶部导航 -->
		<u-navbar @rightClick="rightClick"  :autoBack="true" >
		</u-navbar>
		<u-navbar :title="newInfo.cutTitle" @rightClick="rightClick" :autoBack="true" v-if="navBarShow">
		</u-navbar>

		<!-- 顶部毛玻璃背景图 -->
		<!-- 可选值 xs s m l xl -->
		<pic-blur :params="{
		        width:'750rpx',
		        height:'520rpx',
		        image: newInfo.cover,
		        blur:'xs'
		    }"></pic-blur>
		<view class="model">
			<!-- 标题 -->
			<view class="mtitle">{{newInfo.title}}</view>
			<view class="info-user">
				<view class="info">
					<text>{{ newInfo.author }} {{ newInfo.created_at | timeFormate }} 发布 {{ newInfo.views_count }}阅读</text>
				</view>
			</view>
		</view>
		
		<!-- 轮播图 -->
			<view v-if="swiperList.length > 0"  class="swiper">
				<view class="swiper-box"> 
					<swiper circular="true" autoplay="true">
						<swiper-item v-for="swiperimg in swiperList" :key="swiper.id">
							<image :src="swiperimg" @tap="previewImage()" />
						</swiper-item>
					</swiper>
		
			</view><!-- 轮播图 -->	
		</view>
		
		<!-- 资讯详情 -->
		<view class="info-content">
			<!-- 不需要引入，可直接使用 -->
			<mp-html :content="newInfo.content" />
		</view>

		<!-- 作者信息 -->
		<view class="info-header">
			<text class="send">{{ newInfo.created_at | timeFormate }}发布 </text>
			<text  v-if="newInfo.views_count!=undefined">{{ newInfo.views_count }}阅读</text>
		</view>

		<view class="line" />
		
	</view>
</template>

<script>
	// 引入 时间日期格式化显示函数
	import timeFrom from '@/tools/timeFrom.js'
	export default {
		data() {
			return {
				swiperList:[] ,// 轮播图片
				// 是否显示 navbar
				navBarShow: false,
				// 数据请求状态
				getRequestOK: false,
				// 当前动态详情
				newInfo: {},
			};
		},
		onPageScroll(res) {
			if (res.scrollTop > 100) {
				this.navBarShow = true;
			} else {
				this.navBarShow = false;
			}
		},
		//options 是获取到的资讯的ID
		async onLoad(options) {
			// #ifdef MP-WEIXIN
			// 微信条件下分享到朋友圈、群组
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
			this.getPostDetail(options) // 获取获取帖子详情 
			
			// 设置本地阅读记录缓存
			this.readLogArray = uni.getStorageSync('readLog') || ["null"];
			console.log("readLogArray", this.readLogArray);
			console.log("options.id: ", options.id);
			if (!this.readLogArray.includes(options.id)) {
				this.readLogArray.push(options.id);
			}
			console.log(this.readLogArray);
			uni.setStorageSync('readLog', this.readLogArray);
		},
		
		filters: {
			timeFormate(timeDate) {
				let Time = new Date(timeDate);
				let timestemp = Time.getTime();
				let t = timeFrom(timestemp, "yyyy年mm月dd日");
				return t;
			},
		},
		methods: {
			// 获取帖子详情 options 为当前帖子ID
			async getPostDetail(options){
				const db2 =  uniCloud.databaseForJQL()
				let ListNew  = await  db2.collection("NeuHelper-Posts").where("_id=='" + options.id  + "'")
				.field('content,_id,user_id,title,author,view_count,publish_date,like_count,imgs ').get()
				ListNew = ListNew.data[0]
				this.newInfo = {
					cutTitle: ListNew.title.length > 11 ? ListNew.title.substring(0, 11) + "..." : ListNew.title,
					title:ListNew.title,
					cover: '',
					content: ListNew.content,
					views_count: ListNew.view_count,
					author:ListNew.author,
					created_at:ListNew.publish_date
				}
				if(ListNew.imgs.length == 0 )this.newInfo.cover = "https://mp-ba6dadac-aa5f-4abc-a3b4-3abcf3c08fc3.cdn.bspapp.com/cloudstorage/5a2a8523-dec1-4b2f-81c3-c3f209fd9a4d.jpg"
				else {
					this.newInfo.cover = ListNew.imgs[0].url // 可能会问题
					for(var i = 0 ; i < ListNew.imgs.length ; i++)
						this.swiperList.push( ListNew.imgs[i].url)
				}
				// 加载好数据之后，显示组件
				this.getRequestOK = true;
				this.addViewCount(options,ListNew.view_count) // 阅读数量+1
			},
			// 帖子阅读数量+1
			async addViewCount(options,view_count){
				const db2 =  uniCloud.databaseForJQL()
				try {
					await db2.collection("NeuHelper-Posts").where("_id=='" + options.id  + "'").update({'view_count':view_count +1})
				} catch (e) {
					uni.showModal({
						title: '提示',
						content: e.message
					})
				}
			},
			goHome() {
				uni.navigateTo({
					url: '/subpages/campusInfo/campusInfo'
				})
			},
			// 图片预览
			previewImage(){
				uni.previewImage({urls: this.swiperList});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.hicon {
		height: 36upx;
		width: 36upx;
		padding-left: 30upx;
		padding-top: 10upx;
	}

	.model {
		width: 750upx;
		height: 520upx;
		position: absolute;
		background-color: rgba($color: #364161, $alpha: 0.2);
		z-index: 1;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-end;

		.mtitle {
			margin-top: 20upx;
			width: 700upx;
			margin-left: 25upx;
			font-size: 44upx;
			color: #fff;
			line-height: 64upx;
		}


		.info-user {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;
			align-content: center;
			margin-top: 30upx;
			margin-left: 5upx;
			margin-bottom: 30upx;

			.info {
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				justify-content: flex-end;
				align-items: left;
				margin-left: 20upx;
				font-size: 24upx;
				font-weight: bolder;
				color: #fff;
			}
		}
	}


	.info-content {
		width: 680upx;
		text-align: left;
		margin-top: 10upx;
		// #ifdef MP-WEIXIN
		margin-left: 35upx;
		// #endif
		// #ifndef MP-WEIXIN
		margin-left: 0;
		// #endif
	}

	.info-header {
		margin-top: 10upx;
		margin-left: 25upx;
		padding-bottom: 20upx;
		color: #999;
		font-size: 22upx;

		.send {
			margin-right: 20upx;
		}
	}

	.line {
		height: 30upx;
		width: 750upx;
		background-color: #f3f3f3;
	}
	// 轮播图
	.swiper {
		width: 100%;
		margin-top: 10upx;
		display: flex;
		justify-content: center;
		.swiper-box {
			width: 92%;
			height: 40.7vw;
	
			overflow: hidden;
			border-radius: 15upx;
			box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
			//兼容ios，微信小程序
			position: relative;
			z-index: 1;
			swiper {
				width: 100%;
				height: 40.7vw;
				swiper-item {
					image {
						width: 100%;
						height: 40.7vw;
					}
				}
			}
		}
	}
</style>
